
/*CSS Document*/
/*This is the important stylesheet that details the chess board and pieces and whatnot!*/
/*The first part concerns the actual game pieces and board.*/

.container {
    position : relative;
    z-index : 1;
    margin : auto;
    height : 400px;
    width : 400px;
    background : white;
    border-style : solid;
    border-width : 1px;
    border-color : black;
}

.board {
    position : absolute;
    z-index : 2;
    height : 360px;
    width : 360px;
    margin : 20px;
    display : inline;
    border-style : solid;
    border-width : 1px;
    border-color : black;
}

.square {
    position : relative;
    height : 45px;
    width : 45px;
    margin : 0;
    float : left;
}

.piece {
    position : absolute;
    height : 45px;
    width : 45px;
    cursor : pointer;
}

.axisLabel { /* The axis labels for each file and each rank.*/
    position : relative;
    padding : 0;
    margin : 0;
    text-align : center;
}

.rank { /* For axis labels that deal with the ranks. */
    top : -30px;
    left : -20px;
    width : 20px;
    height : 45px;
}

.file {
    width : 45px;
    height : 20px;
    float : left;
}

.fileLabelHolder {
    position : relative;
    height : 20px;
    margin : 0;
    width : 100%;
    padding : 0;
}

.sidebar {
    position : relative;
    z-index : 0;
    height : 400px;
    width : 185px;
    border-style : solid;
    border-width : 1px;
    border-color : #000;
}

.sidebar .portion {
    position : absolute;
    width : 90px;
    height : 400px;
    display : inline;
}

.sidebar .white {
    left : 0px;
}

.sidebar .black {
    left : 95px;
}

.tab {
    position : absolute;
    height : 50px;
    width : 25px;
    border-color : #000;
    border-width : 1px;
    border-style : solid;
    margin-top : -1px;
    cursor : pointer;
}

.tab .cell{
    width : 100%;
    height : 50%;
    text-align : center;
}

.tab .cell span{
    position : relative;
    margin-left : auto;
    margin-right : auto;
}

.tab .bar {
    position : relative;
    top : -51px;
    border-color : black;
    border-width : 1px;
    border-style : solid;
}

.jail {
    left : 107px;
    top : -428px;
    margin-left : auto;
    margin-right : auto;
}

.jail .piece {
    position : relative;
    display : inline;
    cursor : auto;
}

.jail .tab {
    left : 185px;
}

.jail .tab .bar {
    left : 6px;
}

.history {
    right : 107px;
    top : -830px;
    margin-left : auto;
    margin-right : auto;
}

.history .portion {
    overflow : hidden;
}

.history .tab {
    right : 185px;
}

.history .tab .bar {
    left : -6px;
    top : -56px;
}

.history ol, ul {
    position : absolute;
    margin-top : 10px;
    font-size : 10pt;
}

.history ol li {
    margin-left : -5px;
}

.history ul {
    margin-left : -15px;
    list-style-type : none;
}

.history img {
    margin-top : 5px;
    left : 1px;
}

.history .button {
    position : absolute;
    z-index : 3;
    height : 10px;
    width : 185px;
    padding : 0;
    text-align : center;
    font-size : 8pt;
}

.history .button img {
    position : relative;
    top : -5px;
}

.history .disabled {
    color : #B26E19;
    cursor : auto;
}

.history .disabled img {
    display : none;
}

.history .enabled {
    color : black;
    cursor : pointer;
}

.history .hover {
    background-color : #03A;
}

.menu {
    position : relative;
    background-color : #B26E19;
    margin-left : auto;
    margin-right : auto;
    height : 25px;
    width : 200px;
    left : 100px;
    border-color : black;
    border-width : 1px;
    border-style : solid;
    border-top-width : 0;
}

.menu .button {
    position : relative;
    width : 100px;
    height : 22px;
    text-align : center;
    padding-top : 3px;
    cursor : pointer;
    float : left;
}

.promMenu {
    position : absolute;
    top : 0px;
    left : 0px;
    height : 55px;
    width : 200px;
    display : inline;
    z-index : 3;
}

.menuBackground {
    position : absolute;
    height : 400px;
    width : 400px;
    top : 0px;
    left : 0px;
    z-index : 2;
}

.promMenuTrans {
    position : absolute;
    z-index : -1;
    background-color : #37C;
    height : 50px;
    width : 195px;
}

img.prom {
    position : relative;
    border-color : #37C;
    border-width : 2px;
    border-style : solid;
    cursor : pointer;
}